<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="/monitoring.js"></script>
    <style>
      div {
        background: url('./css.png');
      }
      body {
        background-color: #eee;
      }
      .red {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <button id="err">产生异常</button>
    <button id="err2">产生promise异常</button>
    <button id="srcErr">产生资源异常</button>
    <button id="success">发送成功请求</button>
    <button id="fail">发送失败请求</button>
    <button id="fetch1">发送fetch成功请求</button>
    <button id="fetch2">发送fetch失败请求</button>
    <button id="btn">清空全屏元素（产生白屏异常,需在3秒内点击）</button>

    <div id="div">
      <div class="red"></div>
      <div><span>12345</span></div>
      <div><span>12345</span></div>
      <h1 elementtiming="meaningful">最有意义的元素</h1>
      <input type="text" />
      <img src="./vue源码分析.jpg" alt="vue源码分析" style="width: 200px; height: 100px" />
      <img src="./性能监控系统.jpg" alt="性能监控系统" style="width: 200px; height: 100px" />
      <div id="img"></div>
      <!-- <img src="./响应式逻辑.jpg" alt="响应式逻辑" style="width: 600px; height: 400px" /> -->
      <div><span>12345</span></div>
      <div><span>12345</span></div>
      <div class="red">12345</div>
    </div>
    <img alt="" id="img" />
    <script>
      setTimeout(() => {
        const dom = document.getElementById('img')
        dom.innerHTML = '<img src="./响应式逻辑.jpg" alt="响应式逻辑" style="width: 600px; height: 400px" />'
      }, 500)
      const err = document.querySelector('#err')
      function fun() {
        fun2()
      }
      function fun2() {
        const a = (Math.random() * 6) | 0
        switch (1) {
          case 0:
            a++
          case 1:
            a.b.c = 2
          case 2:
            new Symbol()
          case 3:
            new Proxy()
          case 4:
            let b = 1n + 1
          case 5:
            throw Error('自定义错误')
        }
      }
      err.addEventListener('click', () => {
        fun()
      })
      const err2 = document.querySelector('#err2')
      err2.addEventListener('click', () => {
        new Promise((resolve, reject) => {
          window.a.a
        })
      })
      const err3 = document.getElementById('srcErr')
      err3.addEventListener('click', () => {
        const a = (Math.random() * 7) | 0
        img.src = ['img1.png', 'b.jpg', 'c.webp', 'd.png', 'e.gif', 'f.bmp', 'g.svg'][a]
      })

      const success = document.querySelector('#success')

      success.addEventListener('click', () => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', '/success?a=1', true)
        // xhr.responseType = 'json'
        xhr.onload = function () {
          console.log(xhr.response)
        }
        xhr.send()
      })
      const fail = document.querySelector('#fail')
      fail.addEventListener('click', () => {
        const xhr = new XMLHttpRequest()
        xhr.open('POST', 'fail', true)
        xhr.responseType = 'json'
        xhr.onload = function () {
          console.log(xhr.response)
        }
        xhr.onerror = function (error) {
          console.log(error)
        }
        xhr.send('name=aaa')
      })

      const fetch1 = document.querySelector('#fetch1')
      fetch1.addEventListener('click', async () => {
        let res = await fetch('/fetch1')
        res.text().then(
          (res) => {
            console.log(res)
          },
          (err) => {
            console.log(err)
          }
        )
      })
      const fetch2 = document.querySelector('#fetch2')
      fetch2.addEventListener('click', async () => {
        let res = await fetch('/fetch2', {
          method: 'POST',
        })
      })
      const btn = document.getElementById('btn')
      btn.addEventListener('click', () => {
        document.getElementById('div').innerHTML = ''
      })

      // document.addEventListener('DOMContentLoaded', () => {
      //   let start = Date.now()
      //   while (Date.now() < start + 3001) {}
      // })
    </script>
    <!-- <script src="/111.js"></script> -->
  </body>
</html>
